<template>
  <div>
    <u-tabs-swiper
      ref="tabs"
      :list="list"
      active-color="#4dbf92"
      inactive-color=""
      :is-scroll="false"
      :current="current"
      @change="tabsChange"
    ></u-tabs-swiper>

    <swiper
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item
        :style="{ height: '100%' }"
        v-for="(item, index) in comList"
        :key="index"
      >
        <!-- <u-loading mode="circle"></u-loading> -->
        <component v-bind:is="item"></component>
        <!-- <scroll-view  ref="scrollView" scroll-y @scrolltolower="onreachBottom">
         
        </scroll-view> -->
      </swiper-item>
    </swiper>

    <bar></bar>
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import uTabsSwiper from "@/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue";

import bar from "../home/topbar.vue";

//  import  Swiper  from '@/uview-ui/components/u-swiper/u-swiper'

import SwiperItem from "../../uview-ui/components/u-swiper/u-swiper.vue";

import TotalDataZ from "./totalDataZ.vue"; //1
import Income from "./income.vue"; //2
import Buniness from "./business.vue"; //3
import Firm from "./firm.vue";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    bar,
    TotalDataZ,
    Income,
    Buniness,
    Firm,
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public list = [
    {
      name: "总数据",
    },
    {
      name: "收益",
    },
    {
      name: "交易",
    },
    {
      name: "商户",
    },
  ];
  public comList = [
  "TotalDataZ", "Income", "Buniness", "Firm"];
  public current = 3; // tabs组件的current值，表示当前活动的tab选项
  public swiperCurrent = 3;

  created() {
      console.log(this.$refs.scrollView,'123')

      uni.showLoading({  
    title: '加载资源中'   
                    })

  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

     uni.hideLoading();  
  }
  onLoad(){

  }

  tabsChange(index: any) {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
    console.log(index);
    this.current = index;
    this.swiperCurrent = index;
  }
   transition(data:any) {
    // console.log(data)
  }
  animationfinish(data:any) {
    console.log(data.target.current, "data11111");

    this.current = data.target.current;
  }
  // scroll-view到底部加载更多
  onreachBottom() {}
}
</script>

<style  scoped>
uni-swiper {
  /* height: 100%;
    width: 100%; */
  height: 85vh;
  overflow: scroll;
}
uni-swiper-item {
  overflow: scroll;
}
</style>